// 引入 ECharts 主模块
import * as echarts from 'echarts';

import { useEffect, useRef } from 'react'

function echartInit (node, xData, sData, title) {
  const myChart = echarts.init(node)
  // 绘制图表
  myChart.setOption({
    title: {
      text: title,
    //   left: 30,
    },
    tooltip: {},
    xAxis: {
      data: xData
    },
    yAxis: {},
    color: [
        '#37A2DA',
      ],
    series: [
      {
        // lineStyle: {
        //     color: "pink",//改变线的颜色
        // },
        name: '销量',
        type: 'bar',
        data: sData
      }
    ]
  })
}

function Bar ({ style, xData, sData, title }) {
  // 1. 先不考虑传参问题  静态数据渲染到页面中
  // 2. 把那些用户可能定制的参数 抽象props (1.定制大小 2.data 以及说明文字)
  const nodeRef = useRef(null);
  useEffect(() => {
      console.log('nodeRef.current==>',nodeRef.current)
    echartInit(nodeRef.current, xData, sData, title)
  }, [xData, sData, title])

  return (
    <div ref={nodeRef} style={style}></div>
  )
}

export default Bar